<template>
  <!-- 这里是活动详情页面 -->
  <div class="auton">
    <div style="width: 100%; height: 52px">
      <div style="width: 1200px; margin: 0 auto">
        <!-- 面包屑 -->
        <a-breadcrumb class="Allbreadcrumb" separator=">">
          <a-breadcrumb-item>
            <a href="/">首页</a>
          </a-breadcrumb-item>
          <a-breadcrumb-item
            ><a href="/activity/">幸福文旅</a>
          </a-breadcrumb-item>
          <a-breadcrumb-ite style="color: #ffbe37">活动列表</a-breadcrumb-ite>
        </a-breadcrumb>
      </div>
    </div>
    <div class="pItop" v-if="1">
      <!-- pInav1完结 -->
      <!-- <div class="pInav2">
        <span class="pIspan1">话题：</span>

        <ul class="pIul2" id="pIul2">
          <li
            :class="{ selectedColor: selectIndex1 === index }"
            @click="clinkStyle1(item.id)"
            v-for="(item, index) in EducationData"
            :key="index"
          >
            {{ item.name }}
          </li>
        </ul>
      </div> -->
      <!-- 第一个nav2完结 -->
      <div class="pInav2">
        <span class="pIspan1">时段：</span>

        <ul class="pIul2" style="width: 290px">
          <li
            :class="{ selectedColor: selectIndex2 === item.id }"
            @click="clinkStyle2(item.id)"
            v-for="(item, index) in directionData"
            :key="index"
          >
            {{ item.name }}
          </li>
        </ul>
        <div class="cFdropdown">
          <a-range-picker @change="onChange" />
        </div>
      </div>
      <!-- 第二个nav2完结 -->
      <div class="pInav2">
        <span class="pIspan1">类型：</span>

        <ul class="pIul2" id="pIul2">
          <li
            :class="{ selectedColor: selectIndex3 == null }"
            @click="clinkStyle3(null)"
          >
            不限
          </li>
          <li
            :class="{ selectedColor: selectIndex3 == 2 }"
            @click="clinkStyle3(2)"
          >
            线上
          </li>
          <li
            :class="{ selectedColor: selectIndex3 == 3 }"
            @click="clinkStyle3(3)"
          >
            线下
          </li>
        </ul>
        <!-- <span
          class="pIspan3"
          v-show="flag == 1 && scaleData.length > 15"
          @click="navbar(1)"
          >全部&nbsp;<a-icon type="caret-down"
        /></span>
        <span
          class="pIspan3"
          v-show="flag == 2 && scaleData.length > 15"
          @click="navbar(2)"
          >收起&nbsp;<a-icon type="caret-left"
        /></span> -->
      </div>
      <!-- scaleData完结 -->
      <div class="pInav2" id="pIul2">
        <span class="pIspan1">状态：</span>

        <ul class="pIul2">
          <li
            :class="{ selectedColor: selectIndex4 == item.id }"
            @click="clinkStyle4(item.id)"
            v-for="(item, index) in stateData"
            :key="index"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 内容区 -->
    <div class="cFimg1">
      <div
        class="oEimg-txt5"
        @click="getDescribe(item.eventNo)"
        v-for="(item, index) in activityData"
        :key="index"
      >
        <div class="oEimage4">
          <img
            class="img1 imgborder"
            :src="imageWebUrl + item.cover"
            @error="$event.target.src = GLOBAL.defaultCover"
            alt=""
          />
          <!-- 展示状态的图片 -->
          <img
            v-if="item.eventStatus == 1"
            class="image2"
            src="@/assets/image/icon_start.png"
            alt=""
          />
          <img
            v-if="item.eventStatus != 5 && item.eventStatus != 1"
            class="image2"
            src="@/assets/image/icon_conduct.png"
            alt=""
          />
          <img
            v-if="item.eventStatus == 5"
            class="image2"
            src="@/assets/image/icon_End.png"
            alt=""
          />
        </div>
        <div class="oEcenter">
          <span class="oEspan9" style="margin-left: 16px">{{
            item.title
          }}</span>
          <div class="dlex1-div" style="margin-top: 2px">
            <span class="oEspan10" v-if="item.eventDate"
              ><img
                src="@/assets/image/time_icon.png"
                width="20"
                alt=""
              />&nbsp;&nbsp;{{ item.eventDate }}</span
            >

            <!-- <span class="aLspan3" v-if="item.eventStatus != 5">进行中</span>
          <span class="aLspan4" v-else>已结束</span> -->
          </div>
          <span class="oEspan10" >
            <img src="@/assets/image/employment/place.png" width="20" alt="" />
            &nbsp;&nbsp;{{ item.address?item.address:'线上' }}</span
          >
        </div>

        <div class="aLbottom">
          <span class="aLspan1"
            >{{ item.tag ? "#" : ""
            }}{{
              item.tag
                ? item.tag.split(",").join("#").split("，").join("#")
                : ""
            }}</span
          >
          <span class="aLspan2"
            ><img
              src="@/assets/image/view_icon.png"
              width="16"
              alt=""
            />&nbsp;&nbsp; {{ item.browseNum }}
          </span>
        </div>
      </div>
      <a-empty
        :image="imgUrl"
        :image-style="{
          height: '220px',
        }"
        style="margin: 0 auto; margin-top: 100px"
        v-if="activityData.length == 0 && listflag"
      />
    </div>
    <!-- 结束 -->
    <div class="cnBottom" v-if="activityData.length > 11">
      <div style="margin: 0 auto; width: 230px">
        <a-button v-if="btnState == 1" @click="more()" class="sobtn"
          >点击加载更多</a-button
        >
        <span class="timeTxt1" style="text-align: center" v-if="btnState == 3"
          >没有更多了</span
        >
        <a-button v-if="btnState == 2" :loading="true" class="sobtn">加载中</a-button>
      </div>
    </div>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>
<script>
// import config from "@/plugins/config.js";
import moment from "moment";
export default {
  data() {
    return {
      btnState: 1,
      // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      //唯一值
      valueName: this.$route.query.value, //传输进来的
      totalnbr: 1,
      // config,
      //
      EducationData,
      listflag: false,
      directionData,
      activityData: [],
      stateData,
      scaleData: [],
      selectIndex1: 0, //搜索结果,被选中的li index
      selectIndex2: 0, //搜索结果,被选中的li index
      selectIndex3: null, //搜索结果,被选中的li index
      selectIndex4: 0, //搜索结果,被选中的li index

      // 跳转时传输的数据
      id: "",
      //分页
      current: 1,
      pageIndex: 1,
      //数据传递
      statuser: "", //城市
      topic: "", //
      startTime: "", //startTime时段选择开区间
      endTime: "", //endTime时段选择闭区间
      // 当前选中时段
      time: "",
      // 当前选中状态
      status: "",
      //
      flag: 1,
      onLoading: false,
    };
  },
  methods: {
    //时间表，回调
    moment,
    onChange(dates, dateStrings) {
      this.startTime = dateStrings[0];
      this.endTime = dateStrings[1];
      this.selectIndex2 = "";
      this.activityData = [];
      this.selActivityWebList();
    },
    // 点击选中话题
    clinkStyle1(e) {
      this.selectIndex1 = e;
      if (e != 0) {
        this.topic = EducationData[e].name;
      } else {
        this.topic = "";
      }
      this.selActivityWebList(this.selectIndex3, this.selectIndex4);
      // console.log(e)
    },
    // 查询地址省市
    provincesel() {
      this.$ajax({
        url: "/news/provinceCity/list/province",
        method: "get",
      }).then((res) => {
        if (res.code == 200) {
          this.scaleData = res.data;
          // console.log(this.provinceList);
        } else {
          this.scaleData = [];
          return false;
        }
      });
    },
    // 点击选中时段
    clinkStyle2(e) {
      this.pageIndex = 1;
      this.activityData = [];
      this.selectIndex2 = e;
      if (e != 0) {
        this.time = e;
      } else {
        this.time = "";
      }
      this.selActivityWebList();
    },
    // 点击选中活动位置，分为线上线下，2为线上3为线下
    clinkStyle3(e) {
      this.pageIndex = 1;
      this.activityData = [];
      this.selectIndex3 = e;
      this.statuser = e;
      this.selActivityWebList();
    },
    // 点击状态选择
    clinkStyle4(e) {
      this.pageIndex = 1;
      this.activityData = [];
      this.selectIndex4 = e;
      if (e != 0) {
        this.status = e;
      } else {
        this.status = "";
      }
      this.selActivityWebList();
    },
    // 显示隐藏器
    navbar(e) {
      let navbar = document.getElementById("pIul2");
      if (e == 1) {
        this.flag = 2;
        navbar.style.cssText = "height:auto;";
      } else {
        this.flag = 1;
        navbar.style.cssText = "height:30px;";
      }
    },
    // 跳转函数
    getDescribe(e) {
      //  直接调用$router.push 实现携带参数的跳转
      this.$router.push("/activity/activityDetails?id=" + e);
    },
    // 加载更多
    more() {
      this.btnState = 2;
      this.pageIndex++;
      this.selActivityWebList();
    },
    // 查询分类列表
    selActivityWebList(b) {
      this.onLoading = true;
      this.listflag = false;
      let ber = [];
      // console.log(this.statuser);
      this.$ajax({
        url: "/entrepreneurial/eventinfo/selLatestList",
        method: "post",
        params: {
          pageSize: 12,
          pageIndex: this.pageIndex,
          isOnlineFlag: this.statuser, //城市string
          startDate: this.startTime, //时间闭区间
          endDate: this.endTime, //时间选择闭区间
          time: this.time, //时段 1.今天 2.明天 3.本周 4.本月int
          status: this.status, //状态 1.报名中 2.已结束int
        },
      }).then((res) => {
        this.listflag = true;
        if (res.code == "200") {
          this.onLoading = false;
          ber = res.data.list;
          for (var i in ber) {
            this.activityData.push(ber[i]);
          }
          if (this.pageIndex >= res.data.totalPage) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
          //  console.log('成功');
        } else {
          this.onLoading = false;
          //  console.log('失败');
        }
      });
    },
    // 函数体结束
  },
  mounted() {
    if (this.valueName != null) {
      this.status = this.valueName;
      this.selectIndex4 = this.valueName;
    }
    // 首次进入查询
    this.selActivityWebList();
    // 地址查询
    this.provincesel();
  },
};
const EducationData = [
  { id: 0, name: "不限" },
  { id: 1, name: "幼儿教育" },
  { id: 2, name: "正规教育" },
  { id: 3, name: "成人教育" },
  { id: 4, name: "高等自学教育" },
  { id: 5, name: "开放教育" },
  { id: 6, name: "远程教育" },
];
const directionData = [
  { id: 0, name: "不限" },
  { id: 1, name: "今天" },
  { id: 2, name: "明天" },
  { id: 3, name: "本周" },
  { id: 4, name: "本月" },
];
const stateData = [
  { id: 0, name: "不限" },
  { id: 2, name: "进行中" },
  { id: 3, name: "已结束" },
];
</script>


<style lang="less" scoped>
// 鼠标点击添加样式
.selectedColor {
  background-color: #ffbe37;
  // padding: 7px 10px !important;
  color: #232d32 !important;
}
.pItop {
  width: 1200px;
  background-color: #ffffff;
  margin: 0 auto;
  padding: 35px 40px;
}
.pInav2 {
  width: 1120px;
  margin: 0 auto;
  display: flex;
  margin-top: 25px;
  align-items: flex-start;
  &:first-child {
    margin-top: 25px;
  }
  .pIul2 {
    width: 974px;
    height: 30px;
    overflow: hidden;
    margin-bottom: 0em;
    li {
      float: left;
      padding: 0 10px;
      line-height: 30px;
      margin-left: 10px;
      margin-bottom: 10px;
      &:first-child {
        margin-left: 0px;
      }
      font-size: 14px;
      font-family: PingFangSC-Regular;
      color: #010101;
      cursor: pointer;
    }
  }
  .pIspan1 {
    word-wrap: break-word;
    color: #333333;
    font-size: 14px;
    line-height: 30px;
    font-family: PingFangSC-Medium;
  }
  .pIspan2 {
    width: 48px;
    height: 30px;
    line-height: 30px;
    display: block;
    word-wrap: break-word;
    background-color: #ffbe37;
    color: #fcfcfc;
    font-size: 14px;
    font-family: PingFangSC-Medium;
  }
  .pIspan3 {
    display: block;
    word-wrap: break-word;
    color: #ffbe37;
    font-size: 14px;
    line-height: 30px;
    font-family: PingFangSC-Regular;
    margin-left: 22px;
    cursor: pointer;
  }
}
.cFnav2 {
  width: 1120px;
  height: 30px;
  // background-color: aqua;
  margin: 0 auto;
  margin-top: 30px;
  display: flex;
}
.cFdropdown {
  width: 300px;
  height: 30px;
  float: left;
  // border: #CCCCCC solid 1px;
  text-align: center;
  line-height: 24px;
  margin-left: 10px;
  padding: 0 10px;
  color: #cccccc;
  a {
    color: #cccccc;
  }
}
.cFspan1 {
  z-index: 91;
  width: 50px;
  display: block;
  word-wrap: break-word;
  color: #333333;
  font-size: 14px;
  font-family: PingFangSC-Medium;
  float: left;
  position: relative;
  line-height: 30px;
  display: flex;
}

// top区样式完结，来自pI页面
//  来自oE页面内样式谨慎修改，可能会与本页面有冲突，根据本页面以做略微修改
.cFimg1 {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 50px;
  display: flex;
  flex-direction: row;
  //改变方向
  align-items: center;
  flex-wrap: wrap;
  .cFspan2 {
    width: 48px;
    display: block;
    overflow-wrap: break-word;
    color: #de1e1e;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    white-space: nowrap;
    line-height: 30px;
    padding-left: 17px;
  }
}
.oEimg-txt5 {
  width: 373px;
  background-color: rgb(255, 255, 255);
  margin-left: 40px;
  cursor: pointer;
  margin-top: 30px;
  .oEcenter {
    height: 82px;
  }
}
.oEimg-txt5:nth-child(3n-2) {
  margin-left: 0px;
}
.oEimage4 {
  width: 373px;
  height: 213px;
  .img1 {
    width: 100%;
    height: 100%;
    transition: transform 0.5s linear;
  }
  .img:hover {
    transform: scale(1.1, 1.1);
  }
  .image2 {
    width: 121px;
    height: 104px;
    position: relative;
    top: -217px;
    left: -4px;
  }
}
.oEspan9 {
  width: 238px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 15px;
  font-family: PingFangSC-Medium;
  white-space: nowrap;
  line-height: 24px;
  text-align: justify;
  align-self: center;
  margin-top: 16px;
  margin-left: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s linear;
}
.oEspan9:hover {
  color: @theme;
}
.oEspan10 {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  a {
    display: block;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 12px;
    font-family: PingFangSC-Regular;
    white-space: nowrap;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  padding-left: 17px;
  margin-top: 8px;
  flex: 1;
  display: block;
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 12px;
  font-family: PingFangSC-Regular;
}
.aLspan3 {
  background-color: rgba(255, 149, 77, 1);
  margin-right: 15px;
  padding: 5px 5px;
  font-size: 10px;
  color: #ffffff;
  font-family: PingFangSC-Regular;
}
.aLspan4 {
  background-color: #c7c7c7;
  margin-right: 15px;
  padding: 5px 5px;
  font-size: 10px;
  color: #ffffff;
  font-family: PingFangSC-Regular;
}
.aLbottom {
  width: 373px;
  height: 40px;
  border: #cccccc;
  border-top: #dedede solid 1px;
  margin-top: 17px;
  display: flex;
  .aLspan1 {
    float: left;
    width: 125px;
    overflow: hidden;
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    font-family: PingFangSC-Regular;
    padding-top: 10px;
    text-align: left;
    padding-left: 17px;
    flex: 1;
  }
  .aLspan2 {
    float: right;
    display: block;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    font-family: PingFangSC-Regular;
    padding-top: 10px;
    margin-right: 8px;
  }
}

// 分页器样式
.cFbom3 {
  width: 1200px;
  height: 100px;
  background-color: #f5f5f5;
  margin: 0 auto;
  margin-top: 20px;
}
</style>
